iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0

來輕鬆聊聊

嗨 我是Jacky,今天要來談談HTML。
舉凡網頁開發、設計,不管聽過、看過甚至接觸過的朋友,可能知道藉由HTML與CSS這兩個程式語言,能夠組成我們所看到最基本的網頁畫面。
若將網頁的畫面比喻成一個Word檔案,
HTML就像編輯的標籤,你可以決定畫面上,有標題,有圖片,有表格、文字、超連結,甚至影片。
CSS就像上方萬年不變的編輯列,可以進行改變文字大小、編輯圖片效果、調整行高、版面配置......等等的顯示效果設定。

我是個想轉職前端且0經驗的白紙,自學的來源舉凡部落格文章(如 Medium、iT邦幫忙)、Youtube影片、互動式教學網站(W3school、freeCodeCamp)。
大家都用什麼網站或影片自學呢? 歡迎在下方與大家分享~~/images/emoticon/emoticon41.gif


認識HTML

HTML為一種標籤式語言,擁有起始標籤<>與結束標籤</>,標籤內必須填入相同的特定文字(只限小寫英文)。另外也有一些標籤只有起始標籤,但在HTML5(最新的HTML規範)發布後建議在標籤文字後加上"/",例如<img /><input />等。

標題標籤

  • <h1>~<h6>為標題標籤,h即是heading的縮寫,用在文章標題、段落標題或導覽列。
  • 數字越大,字體越小,<h1>最大,<h6>最小。

範例

<h1>嗨 世界</h1>
<h2>嗨 世界</h2>
<h3>嗨 世界</h3>
<h4>嗨 世界</h4>
<h5>嗨 世界</h5>
<h6>嗨 世界</h6>

顯示效果如下

嗨 世界

嗨 世界

嗨 世界

嗨 世界

嗨 世界
嗨 世界

文章標籤、註解標籤、佔位字符

  • <p>為段落標籤,paragraph的意思,可放入一個字、一段話或是一篇文章。
  • <!-- -->為註解標籤,可將一段標籤連同內容標註起來,使其無效,或者用於片段程式碼解釋和提示。不同於其他標籤,除了直接打出標籤,也可以使用ctrl+/快速將目標範圍標註起來。
  • 佔位字符(placeholder)常用在網頁開發階段,因為還沒有將實際內容放入網站,因此暫時用一段文字作為代表,對於排版上有幫助。

範例

<p>大家好</p>
<p>大家好 我是Jacky</p>

<!-- 大家好 我是Jacky Huang -->

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> <!-- 佔位字符可為任意文字 -->

顯示效果如下

大家好
大家好 我是Jacky

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

HTML5新增的標籤

  • <nav>為導覽區塊標籤,為網頁提供導覽列或導覽按鈕。
  • <header>為頁首標籤,可在其範圍內放入文字、圖片等。
  • <main>為主要區塊標籤,可在其範圍內放入文字、圖片等。
  • <section>為片段標籤,可在其範圍內放入文字、圖片等。
  • <article>為文章標籤,可在其範圍內放入文字、圖片等。
  • <footer>為頁尾標籤,可在其範圍內放入文字、圖片等,通常會包含聯絡資訊或版權聲明。
  • <video>為影片標籤,必須在其src屬性(source)填入影片來源才能顯示出影片。有兩種寫法,請看範例。

範例

<nav>Home</nav> <nav>Menu</nav> <nav>Contact</nav>

<header>
    <h1>這是頁首</h1>
    <p>這也是頁首</p>
</header>

<main>
    <article>
        <section>
            <p>好對稱啊</p>
        </section>
    </article>
</main>

<footer>
    <p>聯絡我們<p>
</footer>

<video>
    <source src="test.mp4" type="video/mp4"/>
</video>
or
<video src="test.mp4"></video>

圖片標籤、超連結標籤

  • <img>為圖片標籤,沒有結束標籤,與插入影片的方式相同,一樣必須在其src屬性(source)填入來源。
  • <a>為超連結標籤,必須在其href屬性(hypertext reference)填入目標的url(網址或網頁目標區域),在用戶點擊時連結到該目標位址。不僅文字能作為超連結,也可為圖片加上超連結。

範例

<img src="test.jpg" />

<a href="#"><p>Jacky's Page</p></a> // #代表是一個可點擊的超連結,但並不會連到任何地方
<a href="#footer">到頁尾<a> // 點擊文字會連結到網頁中標籤id為footer的位置
<a href="www.Jacky.com.tw"><img src="test,jpg" /><a> // 點擊圖片會連結到目標網址

今日的分享就到這邊了,學起來很快,沒想到要用文字打出來,需要用上不少時間呢!/images/emoticon/emoticon16.gif
有些範例在文章內不好呈現,我就不分享了,可以自行google,有很多資料可以學習。
內容基本上都是很基礎的概念,畢竟是基於紀錄的原因,才促使我打出這篇文章。
歡迎各位用力糾錯與指教,我也正積極尋求最正確的觀念。
最後再謝謝大家看到這裡,我們明天見!

內容來源:
freeCodeCamp


下一篇
HTML基礎介紹(2)
系列文
從freeCodeCamp進入前端宇宙9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言